﻿<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<script
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB425wKAGlAQ323sMqenZ5Pc7ErmlcTspM&amp;sensor=false&amp;libraries=drawing"
		type="text/javascript" />
</h:head>

<h:body>
	<p:scrollPanel mode="native" style="width:100%;height:100%;">
		<h:form id="form">
			<p:growl id="growl" life="3000" />
			<p:dataTable id="tblBairros" var="bairr" paginator="true" rows="10"
				value="#{bairroBean.bairros}" style="margin-bottom:20px"
				rowsPerPageTemplate="5,10,15"
				emptyMessage="Nenhum bairro cadastrado.">

				<f:facet name="header">
					Lista de bairros
				</f:facet>

				<!-- 
				<p:column headerText="Código">
					<h:outputText value="#{bairr.codigoBairro}" />
				</p:column>

				<p:column headerText="RPA">
				</p:column>

				<p:column headerText="Microregião">
				</p:column>
				 -->
				<p:column headerText="Nome" filterBy="#{bairr.nomeBairro}"
					filterMatchMode="contains">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{bairr.nomeBairro}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{bairr.nomeBairro}" required="true"
								requiredMessage="Nome do bairro não informado!"
								style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Ano de criação"
					filterBy="#{bairr.anoCriacaoBairro}">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{bairr.anoCriacaoBairro}" />
						</f:facet>
						<f:facet name="input">
							<p:inputMask required="true" mask="9999"
								requiredMessage="Ano de criação do bairro não informado!"
								value="#{bairr.anoCriacaoBairro}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Mapa" width="6%">
					<p:commandLink oncomplete="PF('mapaDlg').show()"
						update=":form:mapa">
						<h:outputText styleClass="ui-icon ui-icon-image"
							style="margin:0 auto;" />
						<f:setPropertyActionListener value="#{bairr}"
							target="#{bairroBean.bairro}" for="mapaDlg" />
					</p:commandLink>
				</p:column>

				<f:facet name="footer">
   					Número de bairros: #{bairroBean.numeroBairrosCadastrados()}.
				</f:facet>
			</p:dataTable>

			<h3>Exportar</h3>
			<h:commandLink>
				<p:graphicImage url="imagens/excel.png" width="24" />
				<p:dataExporter type="xls" target="tblBairros" fileName="bairros"
					pageOnly="true" />
			</h:commandLink>

			<h:commandLink>
				<p:graphicImage url="imagens/pdf.png" width="24" />
				<p:dataExporter type="pdf" target="tblBairros" fileName="bairros"
					pageOnly="true" />
			</h:commandLink>

			<p:dialog widgetVar="mapaDlg" width="670" height="500"
				showEffect="clip" hideEffect="clip" maximizable="false"
				closeOnEscape="true">
				<p:outputPanel id="mapa">
					<h:graphicImage url="#{bairroBean.bairro.url}" />
				</p:outputPanel>
			</p:dialog>

		</h:form>
	</p:scrollPanel>
</h:body>
</html>